<template>
	<view class="live-room">
		<!-- 直播视频区域 -->
		<live-player class="live-player" :src="liveInfo.playUrl" mode="live" :autoplay="true" :muted="isMuted"
			object-fit="contain"></live-player>

		<!-- 顶部信息栏 -->
		<view class="top-bar">
			<view class="left-area">
				<view class="back-btn" @tap="closeLive">
					<text class="iconfont">←</text>
				</view>
				<view class="anchor-info">
					<image class="anchor-avatar" :src="liveInfo.anchorAvatar" mode="aspectFill"></image>
					<view class="anchor-detail">
						<text class="anchor-name">{{ liveInfo.anchorName }}</text>
						<text class="viewers-count">{{ liveInfo.viewersCount }}观看</text>
					</view>
				</view>
			</view>
			<!-- <view class="right-area">
				<view class="more-btn">
					<text class="iconfont">⋮</text>
				</view>
			</view> -->
		</view>

		<!-- 远方好物用户提示 -->
		<!-- <view class="user-tip">
      <image class="tip-icon" src="/static/img/user.png"></image>
      <text class="tip-text">远方好物用户，正在购买</text>
    </view> -->

		<!-- 消息列表区域 -->
		<scroll-view 
			class="message-list" 
			scroll-y 
			:scroll-top="messageScrollTop"
			@scroll="onMessageScroll"
			:scroll-with-animation="true"
			:enhanced="true"
			:bounces="false"
			:show-scrollbar="false"
		>
			<view class="message-wrapper">
				<view 
					class="message-item"
					v-for="(msg, index) in messages"
					:key="index"
				>
					<text class="user-name" :style="{color: msg.userType === 'system' ? '#FFD700' : '#fff'}">
						{{ msg.userName }}
					</text>
					<text class="message-content">{{ msg.content }}</text>
				</view>
			</view>
		</scroll-view>

		<!-- 新消息提示 -->
		<view 
			class="new-message-tip"
			v-if="showNewMessageTip && hasNewMessage"
			@tap="scrollToBottom"
		>
			<text>有新消息</text>
			<text class="tip-arrow">↓</text>
		</view>

		<!-- 商品列表 -->
		<scroll-view class="product-list" scroll-y v-if="showProducts">
			<view class="product-header">
				<text>商品列表</text>
				<text class="close-products" @tap="toggleProducts">×</text>
			</view>
			<view class="product-item" v-for="(item, index) in products" :key="index" @tap="goToProduct(item)">
				<image class="product-image" :src="item.image" mode="aspectFill"></image>
				<view class="product-info">
					<view class="product-title">{{ item.title }}</view>
					<view class="product-desc">{{item.desc}}</view>
					<view class="product-price">¥{{ item.price }}</view>
				</view>
			</view>
		</scroll-view>

		<!-- 底部操作栏 -->
		<view class="bottom-bar">
			<view class="input-box" @click="sendMessage">
				说点什么...
			</view>

			<view class="action-buttons">
				<view class="action-item" @tap="shareLive">
					<button class="share-btn" open-type="share">
						<image class="action-icon" src="/static/img/share.png"></image>
					</button>
				</view>
				<view class="action-item" @tap="toggleProducts">
					<image class="action-icon"
						src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250225/2322a246439b37958058f359876d67a7.png">
					</image>
				</view>

				<view class="action-item" @tap="giveLike">
					<image class="action-icon"
						src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250225/0ac60cbd69d2409c147124b319f9e563.png">
					</image>
				</view>
			</view>
		</view>
		<view v-if="show" class="overlay" @click="closeOverlay"></view>
		<view class="send-btn" v-if="show">
			<form class="form-box" @submit="handleExchange">
				<view class="input-container">
					<input 
						v-model="messageContent" 
						name="messageContent" 
						class="input-item" 
						placeholder="说点什么..." 
						:focus="show"
						@blur="onInputBlur"
						type="text"
						confirm-type="send"
						cursor-spacing="10"
					/>
					<button form-type="submit" class="exchange-button">发送</button>
				</view>
			</form>
		</view>
		<!-- 点赞动画容器 -->
		<view class="like-container" v-if="likeList.length">
			<view class="like-item" v-for="(item, index) in likeList" :key="index" :style="item.style">
				<image
					src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250225/0ac60cbd69d2409c147124b319f9e563.png">
				</image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				liveInfo: {
					playUrl: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250117/b09ea0298816daf09c74ad7ab31f90d9.jpg',
					anchorAvatar: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250117/b09ea0298816daf09c74ad7ab31f90d9.jpg',
					anchorName: '大盆菜',
					viewersCount: '2209人在线'
				},
				isMuted: false,
				messages: [],
				messageScrollTop: 0,
				messageContent: '',
				showProducts: false,
				products: [
					{
					id: 1,
					title: '伊利酸奶畅轻',
					desc:'真好喝',
					price: '39.9',
					image: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250117/b09ea0298816daf09c74ad7ab31f90d9.jpg'
				},
				{
					id: 2,
					title: '水牛奶被誉为“黄金牛奶”  每100毫升含3.9g蛋白质 带有清甜味道的国营放心奶',
					desc:'水牛奶被誉为“黄金牛奶”  每100毫升含3.9g蛋白质 带有清甜味道的国营放心奶',
					price: '39.9',
					image: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250117/33f1ecca4ce0beaa58077b8cbe0395d6.jpg'
				},
				],
				likeList: [],
				likeCount: 0,
				show: false,
				isInputDisabled: true,
				autoScroll: true,
				showNewMessageTip: false,
				lastScrollTop: 0,
				hasNewMessage: false,
				isUserScrolling: false,
				scrollTimer: null
			}
		},

		methods: {
			// 关注主播
			followAnchor() {
				uni.showToast({
					title: '关注成功',
					icon: 'success'
				})
			},

			// 关闭直播
			closeLive() {
				uni.navigateBack()
			},

			// 打开发送消息输入框
			sendMessage() {
				this.show = true
			},

			// 发送消息
			handleExchange() {
				if (!this.messageContent.trim()) return

				const newMessage = {
					userName: '喵喵:',
					content: this.messageContent,
					userType: 'user',
					timestamp: Date.now()
				}

				this.messages.push(newMessage)
				
				// 如果用户正在查看历史消息，才显示新消息提示
				if (this.isUserScrolling && !this.autoScroll) {
					this.hasNewMessage = true
					this.showNewMessageTip = true
				} else {
					this.scrollToBottom()
				}

				this.messageContent = ''
				this.show = false
			},

			// 关闭发送消息弹窗
			closeOverlay() {
				this.show = false
			},

			// 滚动到底部
			scrollToBottom() {
				this.autoScroll = true
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this)
					query.select('.message-list').boundingClientRect(res => {
						if (res) {
							query.select('.message-wrapper').boundingClientRect(wrapperRes => {
								if (wrapperRes) {
									this.messageScrollTop = wrapperRes.height - res.height
									this.showNewMessageTip = false
									this.hasNewMessage = false
								}
							}).exec()
						}
					}).exec()
				})
			},

			// 切换商品列表显示
			toggleProducts() {
				this.showProducts = !this.showProducts
			},

			// 跳转商品详情
			goToProduct(product) {
				uni.navigateTo({
					url: `/pages/product/detail?id=${product.id}`
				})
			},

			// 分享直播
			shareLive() {
				uni.share({
					title: '分享了一个直播间',
					path: '/pagesSocial/livesQuare/lives_detail',
					imageUrl: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250117/b09ea0298816daf09c74ad7ab31f90d9.jpg'
				});
			},

			// 点赞动画
			giveLike() {
				const id = Date.now()
				const style = {
					bottom: '120rpx',
					right: Math.random() * 100 + 'rpx',
					animationDelay: Math.random() * 0.5 + 's'
				}

				this.likeList.push({
					id,
					style
				})
				setTimeout(() => {
					const index = this.likeList.findIndex(item => item.id === id)
					if (index > -1) {
						this.likeList.splice(index, 1)
					}
				}, 3000)
			},

			// 处理消息滚动
			onMessageScroll(e) {
				if (this.scrollTimer) {
					clearTimeout(this.scrollTimer)
				}

				const scrollTop = e.detail.scrollTop
				const maxScrollTop = e.detail.scrollHeight - e.detail.clientHeight

				// 标记用户正在滚动
				this.isUserScrolling = true

				// 判断是否滚动到底部
				const isBottom = maxScrollTop - scrollTop < 20
				this.autoScroll = isBottom

				if (isBottom) {
					this.showNewMessageTip = false
					this.hasNewMessage = false
				}

				// 滚动停止后重置用户滚动标记
				this.scrollTimer = setTimeout(() => {
					this.isUserScrolling = false
				}, 150)
			},

			// 处理输入框失去焦点
			onInputBlur() {
				// 这里可以选择是否在失去焦点时关闭弹窗
				// this.show = false
			}
		},

		// 页面卸载时清理
		beforeDestroy() {
			// 清理相关资源
		},

		mounted() {
			// 只添加一条系统欢迎消息
			this.messages.unshift({
				userName: '系统消息',
				content: '欢迎来到直播间',
				userType: 'system',
				timestamp: Date.now()
			})
		}
	}
</script>

<style>
	.live-room {
		position: relative;
		height: 100vh;
		background: #000;
	}

	.live-player {
		width: 100%;
		height: 100%;
	}

	.top-bar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 40rpx 20rpx;
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);
	}

	.left-area {
		display: flex;
		align-items: center;
	}

	.back-btn {
		width: 60rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		background: rgba(0, 0, 0, 0.5);
		color: #fff;
		font-size: 40rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.anchor-info {
		display: flex;
		align-items: center;
	}

	.anchor-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.anchor-detail {
		color: #fff;
	}

	.anchor-name {
		font-size: 32rpx;
		margin-bottom: 4rpx;
		display: block;
	}

	.viewers-count {
		font-size: 24rpx;
		opacity: 0.8;
	}

	.right-area {
		display: flex;
		align-items: center;
	}

	.more-btn {
		width: 60rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		background: rgba(0, 0, 0, 0.5);
		color: #fff;
		font-size: 40rpx;
		border-radius: 50%;
		margin-left: 20rpx;
	}

	.user-tip {
		position: fixed;
		top: 180rpx;
		left: 20rpx;
		background: rgba(0, 0, 0, 0.5);
		padding: 10rpx 20rpx;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
	}

	.tip-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.tip-text {
		color: #fff;
		font-size: 24rpx;
	}

	.message-list {
		position: fixed;
		left: 20rpx;
		right: 20rpx;
		bottom: 180rpx;
		height: 400rpx;
		transition: all 0.3s ease;
		-webkit-overflow-scrolling: touch;
	}

	.message-wrapper {
		padding: 20rpx 0;
	}

	.message-item {
		background: rgba(0, 0, 0, 0.3);
		border-radius: 30rpx;
		padding: 10rpx 20rpx;
		margin-bottom: 10rpx;
		animation: slideIn 0.3s ease;
		transform: translateZ(0);
	}

	.user-name {
		margin-right: 10rpx;
		font-weight: bold;
	}

	.message-content {
		word-break: break-all;
		color: #fff;
	}

	@keyframes slideIn {
		from {
			transform: translateY(100%);
			opacity: 0;
		}
		to {
			transform: translateY(0);
			opacity: 1;
		}
	}

	.product-list {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 60vh;
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		z-index: 100;
	}

	.product-header {
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid #eee;
	}

	.close-products {
		font-size: 40rpx;
		color: #999;
	}

	.product-item {
		display: flex;
		padding: 20rpx;
		border-bottom: 1rpx solid #eee;
	}

	.product-image {
		width: 180rpx;
		height: 180rpx;
		margin-right: 20rpx;
	}

	.product-info {
		flex: 1;
		position: relative;
	}

	.product-title {
		font-size: 26rpx;
		color: #333;
		margin-bottom: 20rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		font-weight: 700;
	}
	.product-desc {
		font-size: 22rpx;
		color: #d46b08;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		margin-bottom: 20rpx;
	}
	.product-price {
		font-size: 28rpx;
		color: #ff4d4f;
		font-weight: bold;
		position: absolute;
		bottom: 0;
	}

	.bottom-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 80rpx;
		display: flex;
		align-items: center;
		padding: 20rpx;
		background: rgba(0, 0, 0, 0.5);
	}

	.input-box {
		flex: 1;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 30rpx;
		padding: 10rpx 20rpx;
		margin-right: 20rpx;
		color: #fff;
	}

	.input-box input {
		color: #fff;
		font-size: 28rpx;
	}

	.placeholder {
		color: rgba(255, 255, 255, 0.6);
	}

	.action-buttons {
		display: flex;
	}

	.action-item {
		width: 80rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.action-icon {
		width: 48rpx;
		height: 48rpx;
	}

	.like-container {
		position: fixed;
		bottom: 200rpx;
		right: 80rpx;
		pointer-events: none;
	}

	.like-item {
		position: absolute;
		animation: likeFloat 3s ease-out forwards;
	}

	.like-item image {
		width: 60rpx;
		height: 60rpx;
	}

	@keyframes likeFloat {
		0% {
			transform: translateY(0) scale(1);
			opacity: 1;
		}

		50% {
			transform: translateY(-200rpx) scale(1.2);
			opacity: 0.8;
		}

		100% {
			transform: translateY(-400rpx) scale(0.8);
			opacity: 0;
		}
	}

	.share-btn {
		background: none;
		border: none;
		padding: 0;
		display: flex;
		align-content: center;
	}

	.send-btn {
		position: fixed;
		bottom: env(safe-area-inset-bottom);
		padding: 10rpx 20rpx;
		width: 100%;
		background-color: #fff;
		z-index: 1000;
		box-sizing: border-box;
	}

	.form-box {
		width: 100%;
	}

	.input-container {
		display: flex;
		align-items: center;

		width: 100%;
	}

	.input-item {
		height: 60rpx;
		border: 1px solid #ccc;
		padding: 0 20rpx;
		border-radius: 30rpx;
		font-size: 28rpx;
		box-sizing: border-box;
		width: 80%;
		color: #333;
		background: #fff;
	}

	.exchange-button {
		height: 60rpx;
		line-height: 60rpx;
		background-color: #d81e06;
		color: #fff;
		border-radius: 30rpx;
		font-size: 28rpx;
		padding: 0 30rpx;
		z-index: 1000;
		margin-left: 20rpx;
	}

	.overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		/* background-color: rgba(0, 0, 0, 0.5); */
		z-index: 999;
	}

	.new-message-tip {
		position: fixed;
		bottom: 200rpx;
		left: 50%;
		transform: translateX(-50%);
		background: rgba(0, 0, 0, 0.7);
		color: #fff;
		padding: 10rpx 30rpx;
		border-radius: 30rpx;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		z-index: 99;
		animation: fadeIn 0.3s ease;
	}

	.tip-arrow {
		margin-left: 10rpx;
		font-size: 28rpx;
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateX(-50%) translateY(20rpx);
		}
		to {
			opacity: 1;
			transform: translateX(-50%) translateY(0);
		}
	}
</style>